<template>
    <div class="sub-sort">
        <div class="sort">
            <a href="javascript:;" :class="{active:sortParams.sortField===null}" @click="changeSort(null)">默认排序</a>
            <a href="javascript:;" :class="{active:sortParams.sortField==='publishTime'}"
               @click="changeSort('publishTime')">最新商品</a>
            <a href="javascript:;" :class="{active:sortParams.sortField==='orderNum'}" @click="changeSort('orderNum')">最高人气</a>
            <a href="javascript:;" :class="{active:sortParams.sortField==='evaluateNum'}"
               @click="changeSort('evaluateNum')">评论最多</a>

            <a href="javascript:;" @click="changeSort('price')">
                价格排序
                <i class="arrow up" :class="{active:sortParams.sortField==='price' &&sortParams.sortMethod==='asc'}"/>
                <i class="arrow down"
                   :class="{active:sortParams.sortField==='price' &&sortParams.sortMethod==='desc'}"/>
            </a>
        </div>

        <div class="check">
            <el-checkbox v-model="sortParams.inventory" style="color: #999" @change="changeCheck">仅显示有货商品</el-checkbox>
            <el-checkbox v-model="sortParams.onlyDiscount" style="color: #999" @change="changeCheck">仅显示特惠商品</el-checkbox>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SubSort",
        data() {
            return {
                sortParams: {
                    inventory: false,
                    onlyDiscount: false,
                    sortField: null,
                    sortMethod: null
                }
            }
        },
        methods: {
            changeSort(sortField) {

                if (sortField === 'price') {
                    this.sortParams.sortField = sortField
                    if (this.sortParams.sortMethod === null) {
                        // 第一次点击，默认是降序
                        this.sortParams.sortMethod = 'desc'
                    } else {
                        // 其他情况根据当前排序取反
                        this.sortParams.sortMethod = this.sortParams.sortMethod === 'desc' ? 'asc' : 'desc'
                    }
                } else {
                    // 如果排序未改变停止逻辑
                    if (this.sortParams.sortField === sortField) return
                    this.sortParams.sortField = sortField
                    this.sortParams.sortMethod = null
                }
                this.$emit('sort-change', this.sortParams)
            },
            changeCheck(){
                this.$emit('sort-change', this.sortParams)
            }
        }
    }
</script>

<style scoped lang="less">

    .sub-sort {
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .sort {
            display: flex;

            a {
                height: 30px;
                line-height: 28px;
                border: 1px solid #e4e4e4;
                padding: 0 20px;
                border-radius: 2px;
                margin-right: 20px;
                color: #999;
                position: relative;
                transition: all .3s;

                &.active {
                    background: @xtxColor;
                    border-color: @xtxColor;
                    color: #fff;
                }

                .arrow {
                    position: absolute;
                    border: 5px solid transparent;
                    right: 6px;

                    &.up {
                        top: 3px;
                        border-bottom-color: #bbb;

                        &.active {
                            border-bottom-color: @xtxColor;
                        }
                    }

                    &.down {
                        bottom: 3px;
                        border-top-color: #bbb;

                        &.active {
                            border-top-color: @xtxColor;
                        }
                    }
                }
            }
        }

        .check {

        }
    }

</style>